import Vue from 'vue';
import VueRouter from 'vue-router';

import CssVarGenerate from '@/pages/css-var-generate';
import ThemeShow from '@/pages/theme-show';
import Color from "@/pages/color";
import Design from '@/pages/design';
import Use from '@/pages/use';
import Record from '@/pages/record';
import Atom from '@/pages/atom';

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/theme-show'
  },
  {
    path: '/use',
    name: 'use',
    component: Use,
    meta: { title: '安装使用' }
  },
  {
    path: '/record',
    name: 'record',
    component: Record,
    meta: { title: '更新记录' }
  },
  {
    path: '/design',
    name: 'design',
    component: Design,
    meta: { title: '设计规范' }
  },
  {
    path: '/color',
    name: 'color',
    component: Color,
    meta: { title: '色彩' }
  },
  {
    path: '/atom',
    name: 'atom',
    component: Atom,
    meta: { title: '原子类' }
  },
  {
    path: '/theme-show',
    name: 'themeShow',
    component: ThemeShow,
    meta: { title: '主题展示' }
  },
  {
    path: '/css-var-generate',
    name: 'cssVarGenerate',
    component: CssVarGenerate,
    meta: { title: 'CSS变量生成' }
  }
]

const router = new VueRouter({
  routes
});

export { routes, router }
